<html>
<head>
<script>
var span_arr = [];
function init() {
	var div = document.getElementById('div');
	for( var i=0; i<1000; i++ ) {
		var span = document.createElement('span');
		span.appendChild( document.createTextNode(i) );
		span.id = 'span+i';
		span_arr.push( span );
		div.appendChild( span );
		if( i < 999 ) div.appendChild( document.createTextNode(', ') );
	}
}
function test1() {
	alert( 'delete all children via innerHTML' );
	var div = document.getElementById('div');
	var start = new Date();
	div.innerHTML = null;
	var stop = new Date();
	alert( 'from '+start+' to '+stop );
	init();
	return false;
}
function test2() {
	alert( 'delete all children via lastChild' );
	var div = document.getElementById('div');
	while( div.lastChild ) div.removeChild( div.lastChild );
	return false;
}
function test3() {
	alert( 'delete all children via reference' );
	var div = document.getElementById('div');
	for( var span = span_arr.pop(); span; span = span_arr.pop() ) div.removeChild( span );
	return false;
}
function test4() {
	alert( 'delete one via reference' );
	var div = document.getElementById('div');
	delete span_arr[999];
	alert( 'span_arr.length=' + span_arr.length );
	return false;
}
</script>
<style>
#div		{ border: 1px black solid; background-color: yellow; margin: 5px 10px; padding: 2px 5px; }
#div div	{ border: 1px red solid; background-color: pink; margin: 5px 25px; }
button		{ width: 20%; }
</style>
</head>
<body onload='init()' >
<div style='text-align:center;'>
	<button onclick='return test1()'>test1</button>
	<button onclick='return test2()'>test2</button>
	<button onclick='return test3()'>test3</button>
	<button onclick='return test4()'>test3</button>
</div>
<div id='div' style=><!--
	<div>one</div>
	<div>two</div>
	<div>three</div>
	<div>four</div>
	<div>five</div>
	<div>six</div>
--></div>
</body>
